/* Mindsef design tokens. One source for the app and the public site.
   Semantic names follow Cal.com's theme tokens (packages/config/theme/tokens.css, MIT, Cal.com, Inc.);
   4 px spacing step, 7 font sizes and 6 radii follow twenty-ui's design tokens (MIT, Twenty).
   Values: the cockpit v1 palette and Inter (LISTE-FOND part C, 04/11). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.8e433c0592f7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.ad4eb06671be.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 04/11 (LISTE-FOND part C): the cockpit v1 palette (cockpit-v1.md §9) replaces palette A; Inter replaces Manrope.
   Raw colours C2 to C5 first, then the semantic names the CSS uses. */
:root {
  --c-accent: #0071E3; --c-green: #34C759; --c-orange: #FF9F0A; --c-red: #FF3B30; --c-violet: #5856D6;

  /* Surfaces (C2): page, cards and sidebar, grey blocks and list heads */
  --bg-default: #FFFFFF;
  --bg-subtle: #F5F5F7;
  --bg-muted: #F2F2F7;
  --bg-emphasis: #E5E5EA;
  --bg-inverted: #1D1D1F;

  /* Text (C2) */
  --text-default: #1D1D1F;
  --text-subtle: #6E6E73;
  --text-muted: #6E6E73;
  --text-inverted: #FFFFFF;

  /* Lines (C2) */
  --border-default: #D2D2D7;
  --border-subtle: #E5E5EA;
  --border-strong: #C7C7CC;

  /* Accent (C4): the cockpit blue #0071E3, the buttons' blue; Youssef kept it on 04/11 after seeing indigo and orange */
  --brand: var(--c-accent);
  --brand-emphasis: #0062C4;
  --brand-subtle: #E6F1FC;
  --brand-text: #0066CC;

  /* States (C5): fills use the raw colour, text uses a darker shade that passes WCAG AA on white */
  --info: #0066CC;          --info-subtle: #E6F1FC;
  --success: #248A3D;       --success-subtle: #E1F6E6;
  --attention: #B25000;     --attention-subtle: #FFF1DB;  --attention-strong: var(--c-orange);
  --error: #D70015;         --error-subtle: #FFEBEA;
  --violet-subtle: #EEEEFB;

  /* Spacing, 4 px step */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* Type (C9): Inter, tabular figures; the app is denser than the site (body.app below) */
  --font: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 21px; --fs-xl: 28px; --fs-2xl: 44px;
  --lh-tight: 1.2; --lh-base: 1.5; --tracking: -0.005em;
  --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800;

  /* Radii (C3, C7, C10): cards 21.6, fields 12, menu entries 10 */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 21.6px; --r-full: 999px;

  /* Depth (C3, C13): cards have no border, a soft shadow and a 1 px ring */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-card-settings: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.035);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.16);
  --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-panel: -12px 0 30px rgba(0, 0, 0, 0.14);
  --shadow-tour: 0 18px 50px rgba(0, 0, 0, 0.35);          /* C13: the guided tour */
  --shadow-composer: 0 -6px 18px rgba(0, 0, 0, 0.05);      /* C11: the send bar */
  --bg-hover: #F5F5F7;                                      /* C3: a clickable card under the pointer */
  --r-bubble: 18px; --r-bubble-tail: 6px;                   /* C11: message bubbles, the corner toward the sender */
  --scrim: rgba(29, 29, 31, 0.15);           /* B116: the veil under the assistant's panel (Stitch 18: on-surface at 15 %) */

  --focus: 0 0 0 3px rgba(0, 113, 227, 0.35);
  --sidebar-w: 248px;
  --content-max: 1180px;
}

/* C18: dark theme. Light by default; follows the computer at first, then the client's choice (html[data-theme]). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg-default: #1C1C1E; --bg-subtle: #000000; --bg-muted: #2C2C2E; --bg-emphasis: #38383A; --bg-inverted: #F5F5F7;
  --text-default: #F5F5F7; --text-subtle: #A1A1A6; --text-muted: #A1A1A6; --text-inverted: #000000;
  --border-default: #48484A; --border-subtle: #38383A; --border-strong: #636366;
  --c-accent: #0A84FF; --brand-emphasis: #409CFF; --brand-subtle: #0A2540; --brand-text: #64AFFF;
  --info: #64AFFF; --info-subtle: #0A2540; --success: #30D158; --success-subtle: #12301B; --attention: #FFB340;
  --attention-subtle: #3A2A0E; --error: #FF6961; --error-subtle: #3A1614; --violet-subtle: #23244A;
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-card-settings: 0 0 0 1px rgba(255, 255, 255, 0.07);
  --focus: 0 0 0 3px rgba(10, 132, 255, 0.45); --scrim: rgba(0, 0, 0, 0.5);
  --bg-hover: #2C2C2E; --shadow-composer: 0 -1px 0 rgba(255, 255, 255, 0.06);
} }
:root[data-theme="dark"] {
  --bg-default: #1C1C1E; --bg-subtle: #000000; --bg-muted: #2C2C2E; --bg-emphasis: #38383A; --bg-inverted: #F5F5F7;
  --text-default: #F5F5F7; --text-subtle: #A1A1A6; --text-muted: #A1A1A6; --text-inverted: #000000;
  --border-default: #48484A; --border-subtle: #38383A; --border-strong: #636366;
  --c-accent: #0A84FF; --brand-emphasis: #409CFF; --brand-subtle: #0A2540; --brand-text: #64AFFF;
  --info: #64AFFF; --info-subtle: #0A2540; --success: #30D158; --success-subtle: #12301B; --attention: #FFB340;
  --attention-subtle: #3A2A0E; --error: #FF6961; --error-subtle: #3A1614; --violet-subtle: #23244A;
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-card-settings: 0 0 0 1px rgba(255, 255, 255, 0.07);
  --focus: 0 0 0 3px rgba(10, 132, 255, 0.45); --scrim: rgba(0, 0, 0, 0.5);
  --bg-hover: #2C2C2E; --shadow-composer: 0 -1px 0 rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}