/* RPP Central — Design tokens
   ===========================
   Values follow the RPP Design system (Brand Identity Guidelines 2.0) as the
   "App styleguide" artboard applies it to the product
   (style_guide/app-styleguide/Styleguide.dc.html): the palette and its step
   names, Clarika Grotesque on the brand's desktop type scale, radii by role,
   grey-tinted shadows and the calm motion curve. The warm stone ground, the
   14px row size, the tinted status pills and the six identity colours are
   app-only extensions; docs/DESIGN.md lists them. This file is copied verbatim
   to app/assets/stylesheets/tokens.css.
*/

@font-face {
  font-family: "Clarika Grotesque";
  src: url("/assets/clarikagrot-light-41e8ddc1.otf") format("opentype");
  font-weight: 300 400;   /* Regular 400 was not supplied; it maps to Light */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clarika Grotesque";
  src: url("/assets/clarikagrot-medium-b0ec37fd.otf") format("opentype");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------- Brand palette (verbatim from the brand guide, brand step names) -------- */
  --rpp-orange-900: #C04821;   /* Hover / pressed */
  --rpp-orange-500: #F05A2A;   /* Primary brand — RPP Orange */
  --rpp-orange-300: #F69C7F;
  --rpp-orange-200: #F9BDAA;
  --rpp-orange-100: #FCDED4;   /* Subtle tints, selected states, disabled primary fill, tint-danger */
  --rpp-orange-50:  #FEF3EE;   /* app-only: softest wash (drop zones, empty states) */

  --rpp-grey-900: #2F373F;     /* Ink: headings, names, values (RPP Grey) and the one dark field */
  --rpp-grey-800: #595F65;     /* Body copy and secondary ink */
  --rpp-grey-600: #82878C;     /* Meta, hints, placeholders, counts and icons; never body copy */
  --rpp-grey-400: #ACAFB2;     /* Disabled ink; neutral status dot */
  --rpp-grey-300: #D5D7D9;     /* Strong divider, field outline */
  --rpp-grey-200: #EAEBEB;     /* Default divider, tint-neutral */
  --rpp-grey-100: #F4F5F5;     /* Subtle surface, icon tiles */
  --rpp-white:    #FFFFFF;

  --app-ground:   #F8F6F2;     /* app-only: the warm stone page ground, as on the guidelines' package cards */

  /* -------- Interface state colours -------- */
  /* The brand's ui-success-500 (#90DC45), ui-warning-500 (#F0BE2A) and ui-info-500
     (#4BB4EB) are interface only and never carry white text. Danger is brand
     orange; there is no separate red. */
  --status-green:  #90DC45;    /* ui-success: progress bars, the pipeline, delivered dot */
  --status-yellow: #F0BE2A;    /* ui-warning: the in-progress dot */
  --status-blue:   #4BB4EB;    /* ui-info: the review dot */

  /* Tinted status pills — app extension of the state colours, the App
     styleguide's five tints: success, warning and info are 18% of the state
     colour over white; danger is orange-100 with an orange dot; neutral is
     grey-200. A pill is the tint with a grey-900 label and a solid dot in the
     state colour; the -fg values are for callouts and event ink. */
  --status-yellow-bg: #FDF3D6;  --status-yellow-fg: #8A6A0E;
  --status-green-bg:  #EBF8DE;  --status-green-fg:  #3F7E1B;
  --status-blue-bg:   #DCF0FB;  --status-blue-fg:   #1F6E9E;
  --status-neutral-bg: var(--rpp-grey-200);  --status-neutral-fg: var(--rpp-grey-900); /* booked */
  --status-off-bg:    var(--rpp-grey-200);    --status-off-fg:    var(--rpp-grey-800);  /* cancelled, voided */

  /* -------- Semantic tokens (use these in components, not raw palette) -------- */
  --color-bg:           var(--app-ground);      /* the page ground: cards, fields, rail and topbar sit white on it */
  --color-surface:      var(--rpp-white);       /* surface-card */
  --color-surface-alt:  var(--rpp-grey-100);    /* surface-subtle */
  --color-border:       var(--rpp-grey-200);    /* border-subtle */
  --color-border-strong:var(--rpp-grey-300);

  --color-text:         var(--rpp-grey-900);    /* headings, names, values, field text */
  --color-text-body:    var(--rpp-grey-800);    /* body copy: the page default */
  --color-text-muted:   var(--rpp-grey-800);
  --color-text-subtle:  var(--rpp-grey-600);
  --color-text-disabled:var(--rpp-grey-400);
  --color-text-inverse: var(--rpp-white);

  --color-primary:      var(--rpp-orange-500);
  --color-primary-hover:var(--rpp-orange-900);
  --color-primary-tint: var(--rpp-orange-100);
  --color-primary-wash: var(--rpp-orange-50);

  /* Icon badge tints and identity colours — app-only, never on a customer-facing page */
  --tint-green-bg:  #E0F2D8;  --tint-green-fg:  #4FA32B;
  --tint-blue-bg:   #DDEFFB;  --tint-blue-fg:   #2A8EC8;
  --tint-purple-bg: #ECE2FA;  --tint-purple-fg: #7A5CC5;
  --tint-amber-bg:  #FBEED1;  --tint-amber-fg:  #C68A14;
  --tint-orange-bg: var(--rpp-orange-100);  --tint-orange-fg: var(--rpp-orange-900);

  /* -------- Typography -------- */
  --font-sans: "Clarika Grotesque", "Montserrat", system-ui, -apple-system, sans-serif;

  /* The brand's desktop scale, Light 300; headings take -0.01em. The one
     app-only step is --text-sm, 14/20, for dense rows, controls and labels. */
  --text-h2: 50.52px;   --lh-h2: 60px;     /* brand h2: the greeting; the public page title from 900px */
  --text-h3: 37.9px;    --lh-h3: 42px;     /* brand h3: page titles, KPI values */
  --text-h4: 28.43px;   --lh-h4: 36px;     /* brand h4: the calendar's toolbar title */
  --text-lg: 21.33px;   --lh-lg: 30px;     /* brand body-lg: card and section titles */
  --text-base: 16px;    --lh-base: 24px;   /* brand body: the page default */
  --text-sm: 14px;      --lh-sm: 20px;     /* app-only: table rows, lists, buttons, fields, chips */
  --text-xs: 12px;      --lh-xs: 18px;     /* brand body-sm: meta, labels, status pills, tags */
  --lh-eyebrow: 16px;
  --tracking-heading: -0.01em;
  --tracking-eyebrow: 0.14em;

  --weight-light:   300;
  --weight-regular: 400;   /* renders the Light cut */
  --weight-medium:  500;   /* the brand's only emphasis weight; there is no bold */

  /* -------- Spacing scale (4-pt grid) -------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* -------- Radius, by role -------- */
  --radius-image:  0;      /* photography is always square-cornered */
  --radius-card:   8px;    /* cards, panels, callouts, menus (the brand's tile radius; approved 22 Sep 2026) */
  --radius-field:  4px;    /* inputs, selects */
  --radius-xs:     4px;    /* code, swatches, calendar events */
  --radius-tile:   8px;    /* icon tiles, rail icons and small icon chips */
  --radius-button: 999px;  /* every button is a pill */
  --radius-pill:   999px;  /* status pills, tags, filter chips, segmented controls, toggles */
  --radius-circle: 50%;    /* avatars */

  /* -------- Shadows (tinted with RPP Grey, never black) -------- */
  --shadow-sm: 0 1px 2px rgba(47,55,63,.06);       /* fields, chips and secondary buttons on the ground */
  --shadow-card: 0 2px 12px rgba(47,55,63,.06);    /* cards and stats at rest */
  --shadow-md: 0 4px 16px rgba(47,55,63,.08);    /* hover lift */
  --shadow-lg: 0 12px 32px rgba(47,55,63,.10);   /* promoted card, the rail drawer on small screens */
  --shadow-pop:0 24px 64px rgba(47,55,63,.16);   /* overlays and menus */
  --shadow-glow: 0 6px 16px rgba(240,90,42,.28);  /* the brand's orange glow: primary buttons, active chips and segments, the active rail tile */

  /* Focus ring — use on all interactive elements */
  --focus-ring: 0 0 0 3px rgba(240,90,42,.28);

  /* Type over photography */
  --scrim-photo: linear-gradient(180deg, rgba(47,55,63,0) 0%, rgba(47,55,63,.72) 100%);

  /* -------- Component-level tokens -------- */
  --control-h-sm: 28px;     /* compact secondary actions in rows, cards and steppers */
  --control-h-md: 40px;     /* Default: buttons, inputs (the brand's sm button) */
  --control-h-lg: 52px;     /* Public primary actions: the booking action bar (the brand's md button) */

  --duration-fast:    150ms;   /* colour and opacity */
  --duration-normal:  250ms;   /* transforms */
  --easing-standard:  cubic-bezier(.4,0,.2,1);
  --press-scale: .98;
}