/* Theme: Studio Canvas (studio-canvas) */
/* A whimsical yet minimal design system that pairs a generous, creative canvas aesthetic with a highly structured, editorial typographic voice. */

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Martian+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@layer base {
  :root {
    /* A warm, slate-purple tinted grey that anchors the system's playful minimal canvas. */
    --palette-neutral-100: #FBFAFB;
    --palette-neutral-150: #FAF9FA;
    --palette-neutral-200: #F5F4F6;
    --palette-neutral-250: #EEEBEE;
    --palette-neutral-300: #E4E0E4;
    --palette-neutral-350: #D7D1D7;
    --palette-neutral-400: #C6BFC7;
    --palette-neutral-450: #B3AAB3;
    --palette-neutral-500: #9B929C;
    --palette-neutral-550: #807381;
    --palette-neutral-600: #665A67;
    --palette-neutral-650: #504551;
    --palette-neutral-700: #3E353F;
    --palette-neutral-750: #2F2830;
    --palette-neutral-800: #251F26;
    --palette-neutral-850: #1F1A1F;
    --palette-neutral-900: #1D181D;
    /* The signature vibrant purple used for primary actions and active states. */
    --palette-brand-100: #FAF9FF;
    --palette-brand-150: #F9F7FF;
    --palette-brand-200: #F4F2FE;
    --palette-brand-250: #EDE8FE;
    --palette-brand-300: #E3DBFD;
    --palette-brand-350: #D5CAFC;
    --palette-brand-400: #C5B6FB;
    --palette-brand-450: #B29EF9;
    --palette-brand-500: #9C83F6;
    --palette-brand-550: #6A44F2;
    --palette-brand-600: #3F0EEF;
    --palette-brand-650: #320BC2;
    --palette-brand-700: #28089D;
    --palette-brand-750: #200680;
    --palette-brand-800: #1B056B;
    --palette-brand-850: #18045E;
    --palette-brand-900: #17045A;
    --palette-danger-100: #FEF9F9;
    --palette-danger-150: #FEF7F7;
    --palette-danger-200: #FDF1F1;
    --palette-danger-250: #FBE6E6;
    --palette-danger-300: #F9D7D7;
    --palette-danger-350: #F5C4C4;
    --palette-danger-400: #F1ADAD;
    --palette-danger-450: #EC9191;
    --palette-danger-500: #E57272;
    --palette-danger-550: #DD3939;
    --palette-danger-600: #BD2020;
    --palette-danger-650: #951818;
    --palette-danger-700: #731212;
    --palette-danger-750: #590E0E;
    --palette-danger-800: #460B0B;
    --palette-danger-850: #3A0909;
    --palette-danger-900: #370808;
    --palette-warning-100: #FFFAF0;
    --palette-warning-150: #FFF9EB;
    --palette-warning-200: #FFF5DD;
    --palette-warning-250: #FFEEC6;
    --palette-warning-300: #FFE3A5;
    --palette-warning-350: #FFD67B;
    --palette-warning-400: #FFC648;
    --palette-warning-450: #FFB30D;
    --palette-warning-500: #C78800;
    --palette-warning-550: #A16E00;
    --palette-warning-600: #805700;
    --palette-warning-650: #634400;
    --palette-warning-700: #4C3400;
    --palette-warning-750: #3A2800;
    --palette-warning-800: #2D1F00;
    --palette-warning-850: #251900;
    --palette-warning-900: #231800;
    --palette-success-100: #F3FDF6;
    --palette-success-150: #F0FCF3;
    --palette-success-200: #E5F9EB;
    --palette-success-250: #D2F5DC;
    --palette-success-300: #B8F0C8;
    --palette-success-350: #97E9AF;
    --palette-success-400: #6FE08F;
    --palette-success-450: #3FD56A;
    --palette-success-500: #26AA4C;
    --palette-success-550: #1E8A3D;
    --palette-success-600: #186E31;
    --palette-success-650: #125626;
    --palette-success-700: #0E421D;
    --palette-success-750: #0B3316;
    --palette-success-800: #082711;
    --palette-success-850: #07210E;
    --palette-success-900: #061F0D;
    --palette-info-100: #F6FBFF;
    --palette-info-150: #F3F9FF;
    --palette-info-200: #E9F5FF;
    --palette-info-250: #D9EDFF;
    --palette-info-300: #C2E2FF;
    --palette-info-350: #A5D4FF;
    --palette-info-400: #82C3FF;
    --palette-info-450: #59AFFF;
    --palette-info-500: #2A97FF;
    --palette-info-550: #007BF0;
    --palette-info-600: #0062BF;
    --palette-info-650: #004C95;
    --palette-info-700: #003A73;
    --palette-info-750: #002C58;
    --palette-info-800: #002244;
    --palette-info-850: #001D39;
    --palette-info-900: #001B35;
    --palette-accent-100: #FAFAFD;
    --palette-accent-150: #F9F8FC;
    --palette-accent-200: #F4F3FA;
    --palette-accent-250: #EBEAF6;
    --palette-accent-300: #E0DEF0;
    --palette-accent-350: #D1CFE8;
    --palette-accent-400: #C0BCDF;
    --palette-accent-450: #ABA7D3;
    --palette-accent-500: #938EC6;
    --palette-accent-550: #6A63B2;
    --palette-accent-600: #4F4896;
    --palette-accent-650: #3E3878;
    --palette-accent-700: #302C5F;
    --palette-accent-750: #26224B;
    --palette-accent-800: #1E1B3D;
    --palette-accent-850: #1A1734;
    --palette-accent-900: #191632;
  }

  :root {
    --radius: 0.5rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --background: #FFFFFF;
    --foreground: #5D5D5D;
    --card: #FFFFFF;
    --card-foreground: #5D5D5D;
    --popover: #FFFFFF;
    --popover-foreground: #5D5D5D;
    --primary: #7451F2;
    --primary-foreground: #FFFFFF;
    --secondary: #E0E0E0;
    --secondary-foreground: #5D5D5D;
    --muted: #E0E0E0;
    --muted-foreground: #555555;
    --accent: #F4F2FE;
    --accent-foreground: #7451F2;
    --destructive: #C23838;
    --destructive-foreground: #FFFFFF;
    --border: #E0E0E0;
    --input: #E0E0E0;
    --ring: #7451F2;
    --chart-1: #7451F2;
    --chart-2: #0056A7;
    --chart-3: #5952A1;
    --chart-4: #E29B00;
    --chart-5: #24A148;
    --sidebar: #FFFFFF;
    --sidebar-foreground: #5D5D5D;
    --sidebar-primary: #7451F2;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #E0E0E0;
    --sidebar-accent-foreground: #5D5D5D;
    --sidebar-border: #E0E0E0;
    --sidebar-ring: #7451F2;
    --font-sans: "Source Serif 4", system-ui, sans-serif;
    --font-display: "Inter", system-ui, sans-serif;
    --font-mono: "Martian Mono", ui-monospace, monospace;
    --text-hero: 400 3.25rem/3.5625rem var(--font-display);
    --text-hero-tracking: -0.02em;
    --text-title: 400 2.625rem/2.875rem var(--font-display);
    --text-title-tracking: -0.04em;
    --text-heading: 500 1rem/1.125rem var(--font-sans);
    --text-body: 400 0.6875rem/1.125rem var(--font-sans);
    --text-body-transform: uppercase;
    --text-caption: 400 0.6875rem/0.875rem var(--font-sans);
    --text-label: 500 0.6875rem/0.875rem var(--font-display);
    --text-overline: 600 0.5625rem/0.75rem var(--font-display);
    --text-overline-tracking: 0.08em;
    --text-overline-transform: uppercase;
    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 45, 0.03);
    --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 45, 0.05);
    --shadow-md: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0px 1px 6px 0px rgba(0, 0, 0, 0.06), 0px 2px 32px 0px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 8px 48px 0px rgba(0, 0, 0, 0.2);
    --gradient-brand_wash: linear-gradient(135deg, #7451F2 0%, #5952A1 100%);
  }

  .dark {
    --background: #0A0A0A;
    --foreground: #E0E0E0;
    --card: #272727;
    --card-foreground: #E0E0E0;
    --popover: #272727;
    --popover-foreground: #E0E0E0;
    --primary: #9C83F6;
    --primary-foreground: #0A0A0A;
    --secondary: #272727;
    --secondary-foreground: #E0E0E0;
    --muted: #272727;
    --muted-foreground: #ACACAC;
    --accent: #200680;
    --accent-foreground: #FAF9FF;
    --destructive: #E15A5A;
    --destructive-foreground: #0A0A0A;
    --border: #404040;
    --input: #404040;
    --ring: #9C83F6;
    --chart-1: #9C83F6;
    --chart-2: #0056A7;
    --chart-3: #5952A1;
    --chart-4: #E29B00;
    --chart-5: #24A148;
    --sidebar: #0A0A0A;
    --sidebar-foreground: #E0E0E0;
    --sidebar-primary: #9C83F6;
    --sidebar-primary-foreground: #0A0A0A;
    --sidebar-accent: #272727;
    --sidebar-accent-foreground: #E0E0E0;
    --sidebar-border: #404040;
    --sidebar-ring: #9C83F6;
  }
}

@layer base {
  * { border-color: var(--border); }
  body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); }
}

@layer components {
  .text-hero {
    font: var(--text-hero);
    letter-spacing: var(--text-hero-tracking);
  }
  .text-title {
    font: var(--text-title);
    letter-spacing: var(--text-title-tracking);
  }
  .text-heading {
    font: var(--text-heading);
  }
  .text-body {
    font: var(--text-body);
    text-transform: var(--text-body-transform);
  }
  .text-caption {
    font: var(--text-caption);
  }
  .text-label {
    font: var(--text-label);
  }
  .text-overline {
    font: var(--text-overline);
    letter-spacing: var(--text-overline-tracking);
    text-transform: var(--text-overline-transform);
  }
}