/* ============================================================
   chipin-tokens.css
   Caddy — The Chipin Design System
   Token source of truth. Link this file to every page before
   any other stylesheet.
   ============================================================ */

:root {

  /* ==========================================================
     PRIMITIVE TOKENS — Colour: Core (Fairway Green)
     ========================================================== */

  --color-fairway-base:         #065C3E;
  --color-fairway-darker:       #022C1F;
  --color-fairway-darkest:      #181B1A;
  --color-fairway-base-08:      rgba(6, 92, 62, 0.08);
  --color-fairway-base-12:      rgba(6, 92, 62, 0.12);
  --color-fairway-darkest-08:   rgba(24, 27, 26, 0.08);
  --color-fairway-darkest-12:   rgba(24, 27, 26, 0.12);

  /* Putting Green */
  --color-putting-base:         #84EDB2;
  --color-putting-lighter:      #BCF6D5;
  --color-putting-lightest:     #F0FDF5;
  --color-putting-24:           rgba(132, 237, 178, 0.24);
  --color-putting-32:           rgba(132, 237, 178, 0.32);


  /* ==========================================================
     PRIMITIVE TOKENS — Colour: Secondary
     ========================================================== */

  --color-pond:                 #5ECFDC;
  --color-ocean:                #042C32;
  --color-clubhouse:            #3B2504;
  --color-beer:                 #F0C97A;
  --color-lambrusco:            #3D0A14;
  --color-rose:                 #F2B5C0;
  --color-flag:                 #ED4A1D;
  --color-merlot:               #3D1408;


  /* ==========================================================
     PRIMITIVE TOKENS — Colour: Neutrals
     ========================================================== */

  --color-dark-1:               #080300;
  --color-dark-2:               #271F19;
  --color-dark-3:               #3A342E;
  --color-dark-tint:            rgba(8, 3, 0, 0.12);
  --color-white:                #FFFFFF;
  --color-sand-1:               #F7F7F6;
  --color-sand-2:               #E8E6E3;
  --color-sand-3:               #A6A09B;


  /* ==========================================================
     PRIMITIVE TOKENS — Colour: Sentiment
     ========================================================== */

  --color-negative:             #E7000B;
  --color-negative-light:       #FFDDDF;
  --color-negative-dark:        #900C12;
  --color-negative-overlay:     rgba(231, 0, 11, 0.12);

  --color-positive:             #009966;
  --color-positive-light:       #D0FBE4;
  --color-positive-dark:        #036245;
  --color-positive-overlay:     rgba(0, 153, 102, 0.12);

  --color-warning:              #FFB900;
  --color-warning-light:        #FFF9C5;
  --color-warning-dark:         #984D08;
  --color-warning-overlay:      rgba(255, 185, 0, 0.12);

  --color-info:                 #0088FF;
  --color-info-light:           #D4EAFF;


  /* ==========================================================
     SEMANTIC TOKENS — Colour: Border
     ========================================================== */

  --border-neutral:             var(--color-dark-tint);
  --border-overlay:             var(--color-fairway-base-12);
  --border-error:               var(--color-negative);
  --border-focus-ring:          var(--color-fairway-darker);


  /* ==========================================================
     SEMANTIC TOKENS — Colour: Background
     ========================================================== */

  --bg-screen-white:            var(--color-white);
  --bg-screen:                  var(--color-sand-1);

  --bg-surface-primary:         var(--color-white);
  --bg-surface-secondary:       var(--color-sand-1);
  --bg-surface-tertiary:        var(--color-sand-2);
  --bg-surface-overlay:         var(--color-fairway-base-08);


  /* ==========================================================
     SEMANTIC TOKENS — Colour: Content
     ========================================================== */

  --content-primary:            var(--color-dark-1);
  --content-secondary:          var(--color-dark-2);
  --content-tertiary:           var(--color-dark-3);
  --content-link:               var(--color-fairway-base);
  --content-negative:           var(--color-negative-dark);
  --content-success:            var(--color-positive-dark);
  --content-warning:            var(--color-warning-dark);

  /* On interactive surfaces — use only on buttons, nav, chips */
  --content-on-primary:         var(--color-fairway-darkest);
  --content-on-secondary:       var(--color-fairway-darker);
  --content-on-elevated:        var(--color-white);
  --content-nav:                rgba(2, 44, 31, 0.7);
  --content-nav-hover:          var(--color-fairway-darker);
  --content-muted:              rgba(58, 52, 46, 0.40);
  --content-on-negative:        var(--color-negative-dark);


  /* ==========================================================
     SEMANTIC TOKENS — Colour: Interactive
     ========================================================== */

  --interactive-primary:              var(--color-putting-base);
  --interactive-primary-hover:        var(--color-putting-lighter);
  --interactive-secondary:            var(--color-putting-24);
  --interactive-secondary-hover:      var(--color-putting-32);
  --interactive-primary-neutral:      var(--color-dark-2);
  --interactive-secondary-neutral:    var(--color-fairway-darkest-08);
  --interactive-secondary-neutral-hover: var(--color-fairway-darkest-12);
  --interactive-control:              var(--color-fairway-base);
  --interactive-contrast:             var(--color-putting-base);
  --interactive-ghost-hover:          var(--color-fairway-base-08);
  --interactive-ghost-active:         var(--color-fairway-base-12);
  --interactive-elevated:             var(--color-white);

  /* Sentiment backgrounds for interactive surfaces */
  --interactive-bg-warning:           var(--color-warning-light);
  --interactive-bg-warning-overlay:   var(--color-warning-overlay);
  --interactive-bg-negative:          var(--color-negative-light);
  --interactive-bg-negative-overlay:  var(--color-negative-overlay);
  --interactive-bg-positive:          var(--color-positive-light);
  --interactive-bg-positive-overlay:  var(--color-positive-overlay);


  /* ==========================================================
     SEMANTIC TOKENS — Colour: Icon
     ========================================================== */

  --icon-neutral:               var(--color-dark-1);
  --icon-info:                  var(--color-info);
  --icon-negative:              var(--color-negative);
  --icon-positive:              var(--color-positive);
  --icon-warning:               var(--color-warning);


  /* ==========================================================
     PRIMITIVE TOKENS — Spacing (Global/Size — 36 steps)
     ========================================================== */

  --size-0:    0px;
  --size-2:    2px;
  --size-4:    4px;
  --size-6:    6px;
  --size-8:    8px;
  --size-10:   10px;
  --size-12:   12px;
  --size-14:   14px;
  --size-16:   16px;
  --size-18:   18px;
  --size-20:   20px;
  --size-24:   24px;
  --size-28:   28px;
  --size-32:   32px;
  --size-36:   36px;
  --size-40:   40px;
  --size-44:   44px;
  --size-48:   48px;
  --size-56:   56px;
  --size-64:   64px;
  --size-72:   72px;
  --size-80:   80px;
  --size-96:   96px;
  --size-112:  112px;
  --size-128:  128px;
  --size-144:  144px;
  --size-160:  160px;
  --size-176:  176px;
  --size-192:  192px;
  --size-208:  208px;
  --size-224:  224px;
  /* Note: Figma token named "250" resolves to 240px */
  --size-240:  240px;
  --size-256:  256px;
  --size-288:  288px;
  --size-320:  320px;
  --size-384:  384px;


  /* ==========================================================
     SEMANTIC TOKENS — Spacing
     ========================================================== */

  --spacing-between-text:          var(--size-8);
  --spacing-between-actions:       var(--size-8);
  --spacing-graphic-bottom:        var(--size-8);
  --spacing-between-chips:         var(--size-8);
  --spacing-display-text-bottom:   var(--size-16);
  --spacing-text-to-component:     var(--size-16);
  --spacing-component-default-v:   var(--size-16);
  --spacing-component-default-h:   var(--size-16);
  --spacing-content-to-button:     var(--size-24);
  --spacing-screen-mobile:         var(--size-24);
  --spacing-between-sections:      var(--size-32);
  --spacing-between-options:       var(--size-0);
  --spacing-between-small:         var(--size-4);
  --spacing-between-cards:         var(--size-12);


  /* ==========================================================
     SEMANTIC TOKENS — Padding
     ========================================================== */

  --padding-2xs:   var(--size-4);
  --padding-xs:    var(--size-8);
  --padding-sm:    var(--size-16);
  --padding-md:    var(--size-24);
  --padding-lg:    var(--size-32);


  /* ==========================================================
     SEMANTIC TOKENS — Component Size
     ========================================================== */

  --component-size-xs:   var(--size-24);
  --component-size-sm:   var(--size-32);
  --component-size-md:   var(--size-40);
  --component-size-lg:   var(--size-48);
  --component-size-xl:   var(--size-56);
  --component-size-2xl:  var(--size-72);

  --icon-size-base:      var(--size-24);
  --icon-size-sm:        var(--size-16);

  --avatar-size-xs:      var(--size-24);
  --avatar-size-sm:      var(--size-32);
  --avatar-size-lg:      var(--size-48);
  --avatar-size-xl:      var(--size-56);
  --avatar-size-2xl:     var(--size-72);

  --interactive-size-sm:  var(--size-32);
  --interactive-size-md:  var(--size-48);
  --interactive-size-lg:  var(--size-56);
  --interactive-size-xl:  var(--size-64);
  --interactive-size-2xl: var(--size-72);

  /* Sidebar grid-column widths (includes 12px margin each side) */
  --sidebar-width-collapsed: 84px;   /* 60px card + 24px total margin */
  --sidebar-width-expanded:  224px;  /* 200px card + 24px total margin */

  /* 12-column layout grid */
  --grid-columns:                    12;
  --grid-margin:                     20px;
  --grid-gutter:                     32px;
  --grid-col-span-sidebar-collapsed: 1;
  --grid-col-span-sidebar-expanded:  2;
  --grid-col-span-secondary-nav:     2;
  --grid-col-span-content:           8;


  /* ==========================================================
     PRIMITIVE TOKENS — Border Radius (Global/Radii)
     ========================================================== */

  --radius-none:   0px;
  --radius-xs:     12px;
  --radius-sm:     16px;
  --radius-md:     20px;
  --radius-lg:     30px;
  --radius-xl:     40px;
  --radius-2xl:    60px;
  --radius-full:   9999px;


  /* ==========================================================
     SEMANTIC TOKENS — Border Radius (Semantic/Radii mirrors Global/Radii)
     ========================================================== */

  --semantic-radius-none:  var(--radius-none);
  --semantic-radius-xs:    var(--radius-xs);
  --semantic-radius-sm:    var(--radius-sm);
  --semantic-radius-md:    var(--radius-md);
  --semantic-radius-lg:    var(--radius-lg);
  --semantic-radius-xl:    var(--radius-xl);
  --semantic-radius-2xl:   var(--radius-2xl);
  --semantic-radius-full:  var(--radius-full);


  /* ==========================================================
     PRIMITIVE TOKENS — Shadow
     ========================================================== */

  --shadow-default:  0px 7px 29px 0px rgba(58, 52, 46, 0.05);
  --shadow-impact:   0px 7px 29px 0px rgba(58, 52, 46, 0.10);


  /* ==========================================================
     TYPOGRAPHY — Families & Weights
     ========================================================== */

  --font-family-switzer:        'Switzer', system-ui, sans-serif;
  --font-family-special-gothic: 'Tanker', sans-serif;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;


  /* ==========================================================
     TYPOGRAPHY — Product Scale (Switzer)
     letter-spacing: Figma PERCENT ÷ 100 = em value
     ========================================================== */

  --text-screen-title-size:    36px;
  --text-screen-title-lh:      44px;
  --text-screen-title-ls:      -0.025em;
  --text-screen-title-weight:  var(--font-weight-semibold);

  --text-section-title-size:   26px;
  --text-section-title-lh:     32px;
  --text-section-title-ls:     -0.015em;
  --text-section-title-weight: var(--font-weight-semibold);

  --text-subsection-size:      22px;
  --text-subsection-lh:        28px;
  --text-subsection-ls:        -0.015em;
  --text-subsection-weight:    var(--font-weight-semibold);

  --text-body-title-size:      18px;
  --text-body-title-lh:        24px;
  --text-body-title-ls:        -0.01em;
  --text-body-title-weight:    var(--font-weight-semibold);

  --text-body-default-size:    16px;
  --text-body-default-lh:      24px;
  --text-body-default-ls:      0.0005em;
  --text-body-default-weight:  var(--font-weight-regular);

  --text-body-bold-size:       16px;
  --text-body-bold-lh:         24px;
  --text-body-bold-ls:         0.0005em;
  --text-body-bold-weight:     var(--font-weight-semibold);

  --text-link-default-size:    16px;
  --text-link-default-lh:      24px;
  --text-link-default-ls:      0.0005em;
  --text-link-default-weight:  var(--font-weight-semibold);

  --text-body-small-size:      14px;
  --text-body-small-lh:        22px;
  --text-body-small-ls:        0.01em;
  --text-body-small-weight:    var(--font-weight-regular);

  --text-body-small-bold-size:   14px;
  --text-body-small-bold-lh:     22px;
  --text-body-small-bold-ls:     0.01em;
  --text-body-small-bold-weight: var(--font-weight-semibold);

  --text-link-small-size:      14px;
  --text-link-small-lh:        22px;
  --text-link-small-ls:        0.01em;
  --text-link-small-weight:    var(--font-weight-semibold);

  --text-group-title-size:     14px;
  --text-group-title-lh:       20px;
  --text-group-title-ls:       0.015em;
  --text-group-title-weight:   var(--font-weight-medium);


  /* ==========================================================
     TYPOGRAPHY — Editorial Headings (Switzer Semibold)
     ========================================================== */

  --text-h1-size:  78px;
  --text-h1-lh:    82px;
  --text-h1-ls:    -0.03em;

  --text-h2-size:  54px;
  --text-h2-lh:    56px;
  --text-h2-ls:    -0.03em;

  --text-h3-size:  44px;
  --text-h3-lh:    40px;
  --text-h3-ls:    -0.03em;

  --text-h4-size:  30px;
  --text-h4-lh:    34px;
  --text-h4-ls:    -0.025em;


  /* ==========================================================
     TYPOGRAPHY — Editorial Body (Switzer)
     ========================================================== */

  --text-editorial-body-1-size:  20px;
  --text-editorial-body-1-lh:    28px;
  --text-editorial-body-1-ls:    -0.005em;

  --text-editorial-body-2-size:  18px;
  --text-editorial-body-2-lh:    26px;
  --text-editorial-body-2-ls:    0.0125em;

  --text-editorial-body-3-size:  16px;
  --text-editorial-body-3-lh:    24px;
  --text-editorial-body-3-ls:    0.0125em;


  /* ==========================================================
     TYPOGRAPHY — Editorial Display (Special Gothic Expanded One)
     All display text is always uppercase.
     ========================================================== */

  --text-display-1-size:      128px;
  --text-display-1-lh:        0.85;
  --text-display-1-transform: uppercase;

  --text-display-2-size:      96px;
  --text-display-2-lh:        0.85;
  --text-display-2-transform: uppercase;

  --text-display-3-size:      64px;
  --text-display-3-lh:        0.85;
  --text-display-3-transform: uppercase;

  --text-display-4-size:      40px;
  --text-display-4-lh:        0.85;
  --text-display-4-transform: uppercase;

}