/**
 * Sarisara Lanka — the one colour-and-size file (Stage 0 of the rebrand).
 * ============================================================================
 * Every value below is copied, unchanged, from the design system's canonical
 * token sheet (Claude Design project "Sarisara Lanka Design System" v4,
 * preview/_ds.css, 13 September 2026). Do not edit a value here — change it in
 * the design system first, then copy it back, so website and design never drift.
 *
 * SCOPE: the tokens live on `.sarisara-ds`, not on `:root`. A page, a screen or
 * one block opts in by carrying that class (the new homepage puts it on <body>).
 * Nothing outside an opted-in block changes, so the old pages keep looking
 * exactly as they do until their own rebrand stage. Five child stylesheets
 * already define bare names like --ink or --muted inside their own blocks;
 * those keep winning inside their blocks because they are more specific.
 *
 * Loaded on every page (front end, partner dashboard, wp-admin) so any screen
 * can opt in without touching functions.php again.
 *
 * Fonts: @font-face lives in assets/css/sarisara-fonts.css (already loaded).
 *
 * @package Sarisara_Child
 * @since 22 October 2026
 */

.sarisara-ds {
  /* ══════════════════════════════════════════════════════════════════════
     BRAND RAMP — navy → deep violet → violet → light violet
     This is the spine of the whole system. Violet and navy carry almost
     everything you see; the other three colours only ever mean something.
     ══════════════════════════════════════════════════════════════════════ */
  --navy: #090920;              /* brand near-black — text, dark grounds     */
  --navy-soft: #1A1A2E;         /* one step up, for dark-surface layering    */
  --primary-dark: #5C00CC;      /* pressed / hovered violet                  */
  --primary: #7700FF;           /* THE brand colour                          */
  --primary-mid: #B44DFF;       /* mid stop for violet gradients only        */
  --primary-light: #F0E5FF;     /* soft violet fill — badges, active states  */
  --primary-ultra-light: #F8F4FF; /* the faintest violet wash                */

  /* --ink is kept as an alias of the brand navy (v3 pointed it at #0A0B1F). */
  --ink: #090920;
  /* --dark and --secondary are kept so no v3 sheet breaks. Do not use them
     in new work: --dark is the navy, --secondary is success green. */
  --dark: #090920;
  --secondary: #30B300;
  --secondary-light: #EDF9E8;
  --secondary-dark: #228A00;

  /* ══════════════════════════════════════════════════════════════════════
     SEMANTIC — these four say something. Never decorate with them.
     Green  = it worked / it is paid / it is confirmed
     Gold   = look at this before you continue
     Red    = it failed / it will be destroyed
     Violet = information, and every neutral emphasis
     ══════════════════════════════════════════════════════════════════════ */
  --success: #30B300;
  --success-light: #EDF9E8;     /* soft fill — carries NO border             */
  --success-border: #BFE5B0;    /* ONLY for a border on a WHITE background   */
  --success-dark: #228A00;
  --success-text: #1F6B00;      /* green text that passes contrast on white  */

  --warning: #FFB700;
  --warning-light: #FFF8E6;     /* payout page warn banner fill              */
  --warning-border: #F5DFA6;    /* ONLY for a border on a WHITE background   */
  --warning-dark: #CC9200;
  --warning-text: #6B4E00;      /* gold is unreadable as text — use this     */

  --error: #FF0A1F;             /* brand red (was #E5243B in v3)             */
  --error-light: #FEF2F2;       /* trace page red section fill               */
  --error-border: #FBD5D5;      /* ONLY for a border on a WHITE background   */
  --error-dark: #C7000F;

  --info: #7700FF;
  --info-light: #F0E5FF;
  --info-border: #DCC4FF;       /* ONLY for a border on a WHITE background   */

  /* ═══ THE SEVEN PARTNERS ════════════════════════════════════════════════
     Read out of inc/payouts/class-payout-partner-types.php on 14 Sep 2026.
     THAT FILE IS THE TRUTH — it says so itself, and it carries Chiran's own
     colour decisions of 13 September 2026. The payout page is where these
     colours are seen side by side, so it is where they were settled.

     EACH TRADE HAS THREE VALUES, NOT ONE:
       --partner-x        the FILL. The pin, the solid chip, the chart slice.
       --partner-x-ink    the TEXT and the ICON. Usually the same as the fill,
                          but NOT for Home Stay: #EEBB00 is a real yellow and
                          unreadable as text, so its ink is darkened to #9C7A00.
                          Where an ink exists, the icon uses the ink.
       --partner-x-tint   the soft background behind a chip. Never bordered.

       trade              fill       ink        tint       icon
       Tour Guide         #7700FF    #7700FF    #F3ECFF    role-tour-guide
       Tour Driver        #FF6600    #FF6600    #FFF0E6    role-tour-driver
       Hotelier           #0050D8    #0050D8    #E7F0FD    role-hotelier
       Home Stay          #EEBB00    #9C7A00    #FFF7DB    role-home-stay
       Activity Provider  #3C6B52    #3C6B52    #ECF2EE    role-activity-host
       Local Expert       #8A6A2F    #8A6A2F    #F4EFE4    role-local-expert
       Discoverer         #FF0011    #FF0011    #FFE7EA    role-discoverer

     THE LABELS ARE THE PAYOUT PAGE'S LABELS. It is "Hotelier", not "Hotel".
     It is "Activity Provider", not "Activity Host". Use those words.

     A TRAVELLER IS NOT A PARTNER. They pay; they are not paid. Mark them with
     the primary violet, never one of the seven.

     SARISARA ITSELF is not a partner either. Where the platform speaks — an
     admin note, a status change — it takes the guide's violet, because that is
     the house colour. It never appears in a list of people being paid.        */
  --partner-guide: #7700FF;          --partner-guide-ink: #7700FF;        --partner-guide-tint: #F3ECFF;
  --partner-driver: #FF6600;         --partner-driver-ink: #FF6600;       --partner-driver-tint: #FFF0E6;
  --partner-hotel: #0050D8;          --partner-hotel-ink: #0050D8;        --partner-hotel-tint: #E7F0FD;
  --partner-home-stay: #EEBB00;      --partner-home-stay-ink: #9C7A00;    --partner-home-stay-tint: #FFF7DB;
  --partner-activity: #3C6B52;       --partner-activity-ink: #3C6B52;     --partner-activity-tint: #ECF2EE;
  --partner-local-expert: #8A6A2F;   --partner-local-expert-ink: #8A6A2F; --partner-local-expert-tint: #F4EFE4;
  --partner-discoverer: #FF0011;     --partner-discoverer-ink: #FF0011;   --partner-discoverer-tint: #FFE7EA;

  /* Sarisara speaking. Not a partner, never in a pay run. */
  --identity-admin: #7700FF;         --identity-admin-tint: #F3ECFF;

  /* Retired 14 Sep 2026. "Accommodation" is not a trade — a stay is either a
     hotel or a home stay. Aliased so nothing renders black; not for new work. */
  --partner-accommodation: var(--partner-hotel);

  /* v3 names kept alive so every sheet that has not been rewritten still
     renders. New work uses --warning / --success / --error above. */
  --highlight: #FFB700;
  --highlight-light: #FFF8E6;
  --highlight-dark: #CC9200;

  /* ══════════════════════════════════════════════════════════════════════
     NEUTRALS — taken from inquiry-trace.css. Truly neutral: no purple tint
     in the greys. The violet does the colouring, the greys stay out of the way.
     ══════════════════════════════════════════════════════════════════════ */
  --bg: #FAFAFA;                /* THE page ground (locked 19 July 2026)     */
  --surface: #FFFFFF;           /* cards, panels, tables                     */
  --surface-2: #F5F5F5;         /* section-title strips, table heads         */
  --muted: #F5F5F5;
  --border: #E5E5E5;            /* every hairline                            */
  --border-soft: #E8E8E6;       /* the section-card border                   */

  --text-primary: #090920;      /* brand navy                                */
  --text-secondary: #5A5A6E;
  --text-tertiary: #737373;     /* trace page muted-foreground               */
  --text-inverse: #FFFFFF;

  --overlay: rgba(9, 9, 32, .5);
  --overlay-heavy: rgba(9, 9, 32, .75);
  --glass: rgba(255, 255, 255, .72);

  /* ══════════════════════════════════════════════════════════════════════
     GRADIENTS — violet and navy only. No green anywhere.
     The live platform uses gradients almost never: one across the whole of
     the trace page, the payout page and the itinerary preview combined.
     Treat these as rare.
     ══════════════════════════════════════════════════════════════════════ */
  --grad-brand: linear-gradient(135deg, #7700FF 0%, #5C00CC 100%); /* @kind color */
  --grad-brand-deep: linear-gradient(135deg, #5C00CC 0%, #090920 100%); /* @kind color */
  --grad-hero: linear-gradient(135deg, #090920 0%, #2D0066 55%, #5C00CC 100%); /* @kind color */
  --grad-ai: linear-gradient(90deg, #5C00CC 0%, #7700FF 50%, #B44DFF 100%); /* @kind color */
  --grad-surface-glow: radial-gradient(ellipse at top, rgba(119, 0, 255, .04) 0%, transparent 70%);
  --grad-photo-overlay: linear-gradient(180deg, rgba(9, 9, 32, 0) 0%, rgba(9, 9, 32, .75) 100%); /* @kind color */
  /* v3 alias — was violet→green. Now the plain brand gradient. */
  --grad-brand-full: linear-gradient(135deg, #7700FF 0%, #5C00CC 100%); /* @kind color */

  /* ══════════════════════════════════════════════════════════════════════
     TYPE — Google Sans carries the platform; DM Sans is the accent.
     ══════════════════════════════════════════════════════════════════════ */
  --font-heading: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Google Sans', system-ui, -apple-system, sans-serif;
  --font-label: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Kept so every v3 sheet keeps rendering — it is NO LONGER monospace.
     Small labels are the body face now, exactly as the live platform does it. */
  --font-mono: var(--font-label);
  /* Real monospace, for spec read-outs on these reference sheets only.
     Matches the two places the live platform uses a fixed-width face. */
  --font-code: Menlo, Consolas, 'SF Mono', ui-monospace, monospace;

  /* ── Size scale ───────────────────────────────────────────────────────
     Every value below is measured from a live page, not chosen by eye.     */
  --t-display: 54px;   /* HERO ONLY. Once per page, at the top. Never mid-page. */
  --t-h1: 30px;        /* front-end page title                               */
  --t-h2: 23px;        /* admin page title — payouts-admin.css .sspo-head h1 */
  --t-h3: 18px;
  --t-h4: 15px;        /* section heading — trace .trace-section-title, .sspo-h2 */
  --t-body: 15px;      /* itinerary values                                   */
  --t-body-sm: 13px;   /* trace + payout body, help text                     */
  --t-micro: 12px;     /* meta lines, counts                                 */
  --t-label: 11px;     /* UPPERCASE letter-spaced labels                     */

  /* ── Line height ───────────────────────────────────────────────────── */
  --lh-display: 1.05; /* @kind other */
  --lh-heading: 1.25; /* @kind other */
  --lh-body: 1.6; /* @kind other */
  --lh-tight: 1.4; /* @kind other */

  /* ── Weight ────────────────────────────────────────────────────────────
     THE RULE (Chiran, 13 September 2026): 700 is not allowed on small text.
       400  body copy
       500  default UI text, field values, meta
       600  headings up to --t-h2, buttons, badges, table heads
       700  ONLY at --t-h1 and above (30px+)
     The ONE exception is the uppercase letter-spaced section title at 13px
     (--fw-section-title), which is the section-card pattern and reads as a
     label, not as text.
     A 10px or 12px word set in 700 is a defect. Use 600.

     Google Sans ships 400/500/600/700 on the web. 800 belongs to the wordmark
     alone, and the wordmark is artwork, not type.                            */
  --fw-body: 400; /* @kind other */
  --fw-ui: 500; /* @kind other */
  --fw-strong: 600; /* @kind other */
  --fw-display: 700; /* @kind other */
  --fw-section-title: 700; /* @kind other */

  /* ══════════════════════════════════════════════════════════════════════
     SPACING — unchanged from v3; it already matched the platform.
     ══════════════════════════════════════════════════════════════════════ */
  --space-2xs: 2px;   --space-xs: 4px;    --space-sm: 8px;    --space-md: 12px;
  --space-base: 16px; --space-lg: 20px;   --space-xl: 24px;   --space-2xl: 32px;
  --space-3xl: 48px;  --space-4xl: 64px;  --space-5xl: 96px;

  /* ══════════════════════════════════════════════════════════════════════
     RADIUS — the 20px step is gone; nothing on the platform used it.
     12px is THE standard card corner (trace page).
     ══════════════════════════════════════════════════════════════════════ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;        /* banners, inputs, small controls (payout page)       */
  --r-lg: 12px;       /* ◀ DEFAULT CARD — trace page --st-radius            */
  --r-card: 14px;     /* the violet-accent section card                      */
  --r-xl: 16px;       /* itinerary day card                                  */
  --r-full: 9999px;   /* every button, every badge                           */
  /* v3 alias so no sheet breaks — folded into --r-xl. */
  --r-2xl: 16px;

  /* ══════════════════════════════════════════════════════════════════════
     SHADOWS — re-based on the brand navy and softened to what the trace
     page actually casts. Sarisara is a flat, calm system: a hairline border
     does most of the work, and the shadow is barely there.
     ══════════════════════════════════════════════════════════════════════ */
  --sh-card: 0 1px 2px rgba(20, 20, 30, .04);                                  /* section card */
  --sh-1: 0 1px 2px rgba(9, 9, 32, .04), 0 1px 3px rgba(9, 9, 32, .06);
  --sh-2: 0 1px 3px rgba(9, 9, 32, .06), 0 4px 12px rgba(9, 9, 32, .07);
  --sh-3: 0 4px 8px rgba(9, 9, 32, .05), 0 8px 24px rgba(9, 9, 32, .10);
  --sh-4: 0 8px 16px rgba(9, 9, 32, .07), 0 20px 48px rgba(9, 9, 32, .14);
  /* FOCUS GLOW — a violet SHADOW, blurred like levels 3 and 4, not a flat ring.
     Always paired with a 1px violet border on the element itself:
       border: 1px solid var(--primary);  box-shadow: var(--sh-glow);
     The old value was 0 0 0 4px — no blur at all — so it rendered as a second,
     thicker border rather than a glow. (Chiran, 13 September 2026.)          */
  --sh-glow: 0 2px 6px rgba(119, 0, 255, .18), 0 6px 18px rgba(119, 0, 255, .16);
  --sh-glow-sm: 0 1px 4px rgba(119, 0, 255, .16), 0 4px 12px rgba(119, 0, 255, .12);
  --sh-soft: 0 1px 2px rgba(9, 9, 32, .04), 0 12px 32px rgba(9, 9, 32, .05);

  /* ══════════════════════════════════════════════════════════════════════
     MOTION
     ══════════════════════════════════════════════════════════════════════ */
  --ease-smooth: cubic-bezier(.25, .1, .25, 1); /* @kind other */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* @kind other */
  --ease-decel: cubic-bezier(0, 0, .2, 1); /* @kind other */
  --ease-accel: cubic-bezier(.4, 0, 1, 1); /* @kind other */
}