/* ============================================================
   INTEGRASI DESIGN SYSTEM
   File: css/variables.css

   Final unified token architecture.

   Used by:
   - style.css
   - animations.css
   - responsive.css
   - dynamic JS interfaces
   - guide
   - tabs
   - search
   - chatbot
   - forms
   - modal windows
   - toast notifications
============================================================ */


/* ============================================================
   01. ROOT — BRAND PALETTE
============================================================ */

:root {

  /* ----------------------------------------------------------
     GREEN
  ---------------------------------------------------------- */

  --green-25: #fbfefc;

  --green-50: #f4fbf7;

  --green-100: #e9f8ef;

  --green-150: #e1f5e9;

  --green-200: #d6f1e1;

  --green-300: #bde6cd;

  --green-400: #98d2b1;

  --green-500: #70b895;

  --green-600: #4f8f72;

  --green-700: #3e735d;

  --green-800: #335c4c;

  --green-900: #294b3f;

  --green-950: #142b23;


  /* ----------------------------------------------------------
     YELLOW
  ---------------------------------------------------------- */

  --yellow-25: #fffefa;

  --yellow-50: #fffdf5;

  --yellow-100: #fff9df;

  --yellow-150: #fff6cf;

  --yellow-200: #fff1b8;

  --yellow-300: #ffe88f;

  --yellow-400: #ffdc68;

  --yellow-500: #efc74e;

  --yellow-600: #c99a2e;

  --yellow-700: #9b7524;

  --yellow-800: #785a21;

  --yellow-900: #614a20;


  /* ----------------------------------------------------------
     PINK
  ---------------------------------------------------------- */

  --pink-25: #fffbfd;

  --pink-50: #fff8fb;

  --pink-100: #fff0f7;

  --pink-150: #ffe7f1;

  --pink-200: #ffd7e8;

  --pink-300: #ffc1da;

  --pink-400: #f3a2c2;

  --pink-500: #df84aa;

  --pink-600: #c86b93;

  --pink-700: #a65378;

  --pink-800: #82435f;

  --pink-900: #69384f;


  /* ----------------------------------------------------------
     BLUE
  ---------------------------------------------------------- */

  --blue-25: #fbfdff;

  --blue-50: #f7fbff;

  --blue-100: #edf7ff;

  --blue-150: #e5f3ff;

  --blue-200: #dcefff;

  --blue-300: #c4e3fa;

  --blue-400: #9fd0ef;

  --blue-500: #74b4dc;

  --blue-600: #4b8eb9;

  --blue-700: #3c7296;

  --blue-800: #355d78;

  --blue-900: #304e64;


  /* ----------------------------------------------------------
     PURPLE
  ---------------------------------------------------------- */

  --purple-25: #fefcff;

  --purple-50: #fcf9ff;

  --purple-100: #f6efff;

  --purple-150: #f2eaff;

  --purple-200: #eee5ff;

  --purple-300: #dccbfa;

  --purple-400: #c3a8f0;

  --purple-500: #a686d8;

  --purple-600: #8266b2;

  --purple-700: #6c5197;

  --purple-800: #58447a;

  --purple-900: #493965;


  /* ============================================================
     02. NEUTRAL PALETTE
  ============================================================ */

  --neutral-0: #ffffff;

  --neutral-25: #fdfdfc;

  --neutral-50: #fafaf8;

  --neutral-75: #f7f7f4;

  --neutral-100: #f4f5f1;

  --neutral-150: #eeeeea;

  --neutral-200: #e7e9e5;

  --neutral-250: #dde1dc;

  --neutral-300: #d2d7d2;

  --neutral-400: #aeb7b2;

  --neutral-500: #818c87;

  --neutral-600: #626f6a;

  --neutral-700: #46534f;

  --neutral-800: #303d39;

  --neutral-850: #27332f;

  --neutral-900: #1d2926;

  --neutral-925: #17211f;

  --neutral-950: #101916;


  /* ============================================================
     03. BRAND ALIASES
  ============================================================ */

  --brand-primary: var(--green-600);

  --brand-primary-hover: var(--green-700);

  --brand-primary-dark: var(--green-800);

  --brand-primary-soft: var(--green-200);

  --brand-secondary: var(--pink-600);

  --brand-secondary-soft: var(--pink-200);

  --brand-accent: var(--yellow-500);

  --brand-accent-soft: var(--yellow-200);

  --brand-info: var(--blue-600);

  --brand-info-soft: var(--blue-200);

  --brand-green-500: var(--green-500);

  --brand-green-600: var(--green-600);

  --brand-green-700: var(--green-700);

  --pastel-green-100: var(--green-100);

  --pastel-green-200: var(--green-200);

  --pastel-green-300: var(--green-300);

  --pastel-yellow-100: var(--yellow-100);

  --pastel-yellow-200: var(--yellow-200);

  --pastel-yellow-300: var(--yellow-300);

  --pastel-yellow-600: var(--yellow-600);

  --pastel-pink-100: var(--pink-100);

  --pastel-pink-200: var(--pink-200);

  --pastel-pink-300: var(--pink-300);

  --pastel-pink-600: var(--pink-600);

  --pastel-blue-100: var(--blue-100);

  --pastel-blue-200: var(--blue-200);

  --pastel-blue-300: var(--blue-300);

  --pastel-purple-200: var(--purple-200);


  /* ============================================================
     04. SEMANTIC COLORS
  ============================================================ */

  --color-success: var(--green-600);

  --color-success-hover: var(--green-700);

  --color-success-soft: var(--green-100);

  --color-warning: var(--yellow-600);

  --color-warning-soft: var(--yellow-100);

  --color-danger: var(--pink-700);

  --color-danger-soft: var(--pink-100);

  --color-info: var(--blue-600);

  --color-info-soft: var(--blue-100);


  /* ============================================================
     05. PAGE BACKGROUNDS
  ============================================================ */

  --bg-page: #fffaf4;

  --bg-page-alt: #fbfcfa;

  --bg-page-soft: #f7faf8;

  --bg-page-warm: #fff9f2;

  --bg-surface: #ffffff;

  --bg-surface-soft: #fdfcf9;

  --bg-surface-muted: #f4f7f5;

  --bg-surface-green: var(--green-50);

  --bg-surface-pink: var(--pink-50);

  --bg-surface-yellow: var(--yellow-50);

  --bg-surface-blue: var(--blue-50);

  --bg-dark: #172421;

  --bg-dark-soft: #20302c;

  --bg-dark-card: #283a35;

  --bg-overlay:
    rgba(
      16,
      25,
      22,
      0.6
    );


  /* ============================================================
     06. TEXT COLORS
  ============================================================ */

  --text-primary: #21312f;

  --text-secondary: #53635f;

  --text-muted: #77847f;

  --text-soft: #98a39f;

  --text-disabled: #b3bbb7;

  --text-inverse: #ffffff;

  --text-inverse-soft:
    rgba(
      255,
      255,
      255,
      0.74
    );

  --text-inverse-muted:
    rgba(
      255,
      255,
      255,
      0.54
    );

  --text-green: var(--green-700);

  --text-yellow: var(--yellow-700);

  --text-pink: var(--pink-700);

  --text-blue: var(--blue-700);

  --text-purple: var(--purple-700);


  /* ============================================================
     07. BORDER COLORS
  ============================================================ */

  --border-subtle:
    rgba(
      33,
      49,
      47,
      0.06
    );

  --border-default:
    rgba(
      33,
      49,
      47,
      0.11
    );

  --border-medium:
    rgba(
      33,
      49,
      47,
      0.17
    );

  --border-strong:
    rgba(
      33,
      49,
      47,
      0.25
    );

  --border-glass:
    rgba(
      255,
      255,
      255,
      0.66
    );

  --border-dark:
    rgba(
      255,
      255,
      255,
      0.12
    );

  --border-green:
    rgba(
      79,
      143,
      114,
      0.28
    );

  --border-yellow:
    rgba(
      201,
      154,
      46,
      0.28
    );

  --border-pink:
    rgba(
      200,
      107,
      147,
      0.28
    );

  --border-blue:
    rgba(
      75,
      142,
      185,
      0.28
    );

  --border-purple:
    rgba(
      130,
      102,
      178,
      0.28
    );


  /* ============================================================
     08. TYPOGRAPHY — FONT FAMILIES
  ============================================================ */

  --font-primary:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-display:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-mono:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;


  /* ============================================================
     09. TYPOGRAPHY — WEIGHTS
  ============================================================ */

  --weight-thin: 100;

  --weight-light: 300;

  --weight-regular: 400;

  --weight-medium: 500;

  --weight-semibold: 600;

  --weight-bold: 700;

  --weight-extrabold: 800;

  --weight-black: 900;


  /* ============================================================
     10. TYPOGRAPHY — FONT SIZES
  ============================================================ */

  --font-3xs: 0.625rem;

  --font-2xs: 0.6875rem;

  --font-xs: 0.75rem;

  --font-sm: 0.875rem;

  --font-base: 1rem;

  --font-md: 1.0625rem;

  --font-lg: 1.125rem;

  --font-xl: 1.25rem;

  --font-2xl: 1.5rem;

  --font-3xl: 1.875rem;

  --font-4xl: 2.25rem;

  --font-5xl: 3rem;

  --font-6xl: 3.75rem;

  --font-7xl: 4.5rem;

  --font-8xl: 5.5rem;

  --font-9xl: 6.5rem;


  /* ============================================================
     11. LINE HEIGHT
  ============================================================ */

  --leading-none: 1;

  --leading-display: 1.02;

  --leading-tight: 1.1;

  --leading-snug: 1.25;

  --leading-normal: 1.5;

  --leading-relaxed: 1.65;

  --leading-loose: 1.8;


  /* ============================================================
     12. LETTER SPACING
  ============================================================ */

  --tracking-tightest: -0.065em;

  --tracking-tighter: -0.05em;

  --tracking-tight: -0.03em;

  --tracking-normal: 0;

  --tracking-wide: 0.035em;

  --tracking-wider: 0.075em;

  --tracking-widest: 0.12em;


  /* ============================================================
     13. SPACING SCALE
  ============================================================ */

  --space-0: 0;

  --space-1: 0.25rem;

  --space-2: 0.5rem;

  --space-3: 0.75rem;

  --space-4: 1rem;

  --space-5: 1.25rem;

  --space-6: 1.5rem;

  --space-7: 1.75rem;

  --space-8: 2rem;

  --space-9: 2.25rem;

  --space-10: 2.5rem;

  --space-11: 2.75rem;

  --space-12: 3rem;

  --space-14: 3.5rem;

  --space-16: 4rem;

  --space-18: 4.5rem;

  --space-20: 5rem;

  --space-22: 5.5rem;

  --space-24: 6rem;

  --space-28: 7rem;

  --space-32: 8rem;

  --space-36: 9rem;

  --space-40: 10rem;


  /* ============================================================
     14. CONTAINER WIDTHS
  ============================================================ */

  --container-xs: 620px;

  --container-sm: 760px;

  --container-md: 920px;

  --container-lg: 1080px;

  --container-xl: 1180px;

  --container-2xl: 1320px;

  --container-wide: 1440px;

  --container-main: 1180px;


  /* ============================================================
     15. BORDER RADII
  ============================================================ */

  --radius-none: 0;

  --radius-xs: 6px;

  --radius-sm: 10px;

  --radius-md: 14px;

  --radius-lg: 18px;

  --radius-xl: 22px;

  --radius-2xl: 28px;

  --radius-3xl: 34px;

  --radius-4xl: 42px;

  --radius-5xl: 52px;

  --radius-full: 999px;


  /* ============================================================
     16. SHADOWS
  ============================================================ */

  --shadow-none:
    none;

  --shadow-xs:
    0
    2px
    8px
    rgba(
      33,
      49,
      47,
      0.04
    );

  --shadow-sm:
    0
    8px
    24px
    rgba(
      33,
      49,
      47,
      0.06
    );

  --shadow-md:
    0
    16px
    42px
    rgba(
      33,
      49,
      47,
      0.09
    );

  --shadow-lg:
    0
    26px
    70px
    rgba(
      33,
      49,
      47,
      0.13
    );

  --shadow-xl:
    0
    40px
    110px
    rgba(
      33,
      49,
      47,
      0.17
    );

  --shadow-card:
    0
    18px
    55px
    rgba(
      33,
      49,
      47,
      0.09
    );

  --shadow-card-hover:
    0
    30px
    80px
    rgba(
      33,
      49,
      47,
      0.15
    );

  --shadow-green:
    0
    20px
    55px
    rgba(
      79,
      143,
      114,
      0.18
    );

  --shadow-yellow:
    0
    20px
    55px
    rgba(
      201,
      154,
      46,
      0.16
    );

  --shadow-pink:
    0
    20px
    55px
    rgba(
      200,
      107,
      147,
      0.16
    );

  --shadow-blue:
    0
    20px
    55px
    rgba(
      75,
      142,
      185,
      0.16
    );


  /* ============================================================
     17. BLUR SCALE
  ============================================================ */

  --blur-none: 0;

  --blur-xs: 4px;

  --blur-sm: 8px;

  --blur-md: 16px;

  --blur-lg: 24px;

  --blur-xl: 36px;

  --blur-2xl: 60px;


  /* ============================================================
     18. MOTION DURATIONS
  ============================================================ */

  --duration-instant: 0ms;

  --duration-fast: 140ms;

  --duration-normal: 240ms;

  --duration-medium: 380ms;

  --duration-slow: 650ms;

  --duration-slower: 900ms;

  --duration-hero: 1100ms;


  /* ============================================================
     19. EASING CURVES
  ============================================================ */

  --ease-linear:
    linear;

  --ease-standard:
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );

  --ease-emphasized:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --ease-soft:
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );

  --ease-bounce:
    cubic-bezier(
      0.34,
      1.56,
      0.64,
      1
    );


  /* ============================================================
     20. TRANSITION ALIASES
  ============================================================ */

  --transition-fast:
    var(--duration-fast)
    var(--ease-standard);

  --transition-default:
    var(--duration-normal)
    var(--ease-standard);

  --transition-smooth:
    var(--duration-medium)
    var(--ease-emphasized);

  --transition-slow:
    var(--duration-slow)
    var(--ease-soft);


  /* ============================================================
     21. Z-INDEX SYSTEM
  ============================================================ */

  --z-behind: -1;

  --z-base: 1;

  --z-content: 5;

  --z-card: 10;

  --z-floating: 30;

  --z-dropdown: 100;

  --z-sticky: 200;

  --z-header: 300;

  --z-overlay: 400;

  --z-modal: 500;

  --z-toast: 600;

  --z-tooltip: 700;

  --z-maximum: 9999;


  /* ============================================================
     22. GRADIENTS
  ============================================================ */

  --gradient-brand:
    linear-gradient(
      135deg,
      var(--green-200),
      var(--yellow-200),
      var(--pink-200)
    );

  --gradient-green:
    linear-gradient(
      145deg,
      var(--green-50),
      var(--green-300)
    );

  --gradient-yellow:
    linear-gradient(
      145deg,
      var(--yellow-50),
      var(--yellow-300)
    );

  --gradient-pink:
    linear-gradient(
      145deg,
      var(--pink-50),
      var(--pink-300)
    );

  --gradient-blue:
    linear-gradient(
      145deg,
      var(--blue-50),
      var(--blue-300)
    );

  --gradient-purple:
    linear-gradient(
      145deg,
      var(--purple-50),
      var(--purple-300)
    );

  --gradient-dark:
    linear-gradient(
      145deg,
      var(--bg-dark-soft),
      var(--neutral-950)
    );

  --gradient-page:
    linear-gradient(
      180deg,
      var(--bg-page)
      0%,
      #ffffff
      45%,
      var(--bg-page-soft)
      100%
    );

  --gradient-glass:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.88
      ),
      rgba(
        255,
        255,
        255,
        0.52
      )
    );


  /* ============================================================
     23. GLASS SURFACES
  ============================================================ */

  --glass-white:
    rgba(
      255,
      255,
      255,
      0.72
    );

  --glass-white-soft:
    rgba(
      255,
      255,
      255,
      0.55
    );

  --glass-white-strong:
    rgba(
      255,
      255,
      255,
      0.9
    );

  --glass-dark:
    rgba(
      23,
      36,
      33,
      0.82
    );

  --glass-border:
    rgba(
      255,
      255,
      255,
      0.66
    );


  /* ============================================================
     24. HEADER TOKENS
  ============================================================ */

  --header-height: 74px;

  --header-bg:
    rgba(
      255,
      250,
      244,
      0.84
    );

  --header-bg-scrolled:
    rgba(
      255,
      255,
      255,
      0.93
    );

  --header-border:
    var(--border-subtle);

  --header-blur:
    24px;


  /* ============================================================
     25. HERO TOKENS
  ============================================================ */

  --hero-min-height:
    calc(
      100vh -
      var(--header-height)
    );

  --hero-padding-top:
    72px;

  --hero-padding-bottom:
    90px;

  --hero-gap:
    56px;

  --hero-title-max-width:
    790px;

  --hero-text-max-width:
    650px;


  /* ============================================================
     26. SECTION TOKENS
  ============================================================ */

  --section-padding-xs: 56px;

  --section-padding-sm: 72px;

  --section-padding-md: 88px;

  --section-padding-lg: 105px;

  --section-padding-xl: 125px;

  --section-heading-width: 760px;


  /* ============================================================
     27. BUTTON TOKENS
  ============================================================ */

  --button-height-xs: 36px;

  --button-height-sm: 42px;

  --button-height-md: 50px;

  --button-height-lg: 56px;

  --button-height-xl: 62px;

  --button-padding-xs:
    0 12px;

  --button-padding-sm:
    0 16px;

  --button-padding-md:
    0 20px;

  --button-padding-lg:
    0 26px;

  --button-padding-xl:
    0 32px;

  --button-radius:
    var(--radius-full);


  /* ============================================================
     28. CARD TOKENS
  ============================================================ */

  --card-bg:
    var(--bg-surface);

  --card-border:
    var(--border-default);

  --card-radius:
    var(--radius-3xl);

  --card-padding-sm:
    20px;

  --card-padding-md:
    26px;

  --card-padding-lg:
    32px;

  --card-shadow:
    var(--shadow-card);

  --card-shadow-hover:
    var(--shadow-card-hover);


  /* ============================================================
     29. FORM TOKENS
  ============================================================ */

  --input-height: 54px;

  --input-bg:
    var(--bg-surface);

  --input-bg-focus:
    #ffffff;

  --input-border:
    var(--border-default);

  --input-border-hover:
    var(--border-medium);

  --input-border-focus:
    rgba(
      79,
      143,
      114,
      0.56
    );

  --input-ring:
    rgba(
      79,
      143,
      114,
      0.12
    );

  --input-radius:
    var(--radius-lg);

  --textarea-min-height:
    150px;


  /* ============================================================
     30. APP PREVIEW TOKENS
  ============================================================ */

  --app-bg:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.88
      ),
      rgba(
        255,
        255,
        255,
        0.48
      )
    );

  --app-card-bg:
    rgba(
      255,
      255,
      255,
      0.82
    );

  --app-card-border:
    rgba(
      33,
      49,
      47,
      0.1
    );

  --app-radius:
    44px;

  --app-panel-radius:
    28px;


  /* ============================================================
     31. GUIDE TOKENS
  ============================================================ */

  --guide-menu-gap: 12px;

  --guide-step-radius: 20px;

  --guide-step-bg:
    rgba(
      255,
      255,
      255,
      0.72
    );

  --guide-step-active-bg:
    #ffffff;

  --guide-panel-bg:
    rgba(
      255,
      255,
      255,
      0.78
    );


  /* ============================================================
     32. NEWS TOKENS
  ============================================================ */

  --news-card-gap: 16px;

  --news-label-radius:
    var(--radius-full);


  /* ============================================================
     33. SEARCH TOKENS
  ============================================================ */

  --search-width:
    720px;

  --search-overlay-bg:
    rgba(
      16,
      25,
      22,
      0.56
    );

  --search-panel-radius:
    var(--radius-3xl);


  /* ============================================================
     34. CHATBOT TOKENS
  ============================================================ */

  --chatbot-width:
    360px;

  --chatbot-height:
    520px;

  --chatbot-radius:
    var(--radius-3xl);

  --chatbot-message-radius:
    15px;


  /* ============================================================
     35. MODAL TOKENS
  ============================================================ */

  --modal-width:
    680px;

  --modal-radius:
    var(--radius-3xl);

  --modal-overlay:
    rgba(
      16,
      25,
      22,
      0.6
    );


  /* ============================================================
     36. TOAST TOKENS
  ============================================================ */

  --toast-width-min:
    280px;

  --toast-width-max:
    380px;

  --toast-radius:
    16px;


  /* ============================================================
     37. ICON TOKENS
  ============================================================ */

  --icon-size-xs: 16px;

  --icon-size-sm: 20px;

  --icon-size-md: 24px;

  --icon-size-lg: 30px;

  --icon-size-xl: 36px;

  --icon-tile-sm: 44px;

  --icon-tile-md: 54px;

  --icon-tile-lg: 64px;

  --icon-tile-xl: 74px;


  /* ============================================================
     38. FOOTER TOKENS
  ============================================================ */

  --footer-bg:
    #172421;

  --footer-text:
    rgba(
      255,
      255,
      255,
      0.7
    );

  --footer-title:
    #ffffff;

  --footer-border:
    rgba(
      255,
      255,
      255,
      0.12
    );


  /* ============================================================
     39. WHATSAPP TOKENS
  ============================================================ */

  --whatsapp:
    #25d366;

  --whatsapp-hover:
    #20bd5a;

  --whatsapp-dark:
    #1ba94c;

  --whatsapp-shadow:
    0
    18px
    45px
    rgba(
      37,
      211,
      102,
      0.32
    );


  /* ============================================================
     40. PARALLAX VARIABLES

     Important:
     JavaScript changes variables,
     not the transform property directly.
  ============================================================ */

  --parallax-x: 0px;

  --parallax-y: 0px;

  --pointer-x: 0px;

  --pointer-y: 0px;

  --float-y: 0px;

  --hover-y: 0px;

  --motion-scale: 1;

  --motion-rotate: 0deg;


  /* ============================================================
     41. SAFE AREA
  ============================================================ */

  --safe-top:
    env(
      safe-area-inset-top,
      0px
    );

  --safe-right:
    env(
      safe-area-inset-right,
      0px
    );

  --safe-bottom:
    env(
      safe-area-inset-bottom,
      0px
    );

  --safe-left:
    env(
      safe-area-inset-left,
      0px
    );


  /* ============================================================
     42. BREAKPOINT DOCUMENTATION
  ============================================================ */

  --breakpoint-mobile-xs: 360px;

  --breakpoint-mobile-sm: 420px;

  --breakpoint-mobile: 600px;

  --breakpoint-tablet: 768px;

  --breakpoint-tablet-lg: 900px;

  --breakpoint-laptop: 1100px;

  --breakpoint-desktop: 1200px;

  --breakpoint-wide: 1440px;

  --breakpoint-ultra: 1600px;


  /* ============================================================
     43. LEGACY COMPATIBILITY ALIASES

     Keep old code functional while project
     is fully moved to the final architecture.
  ============================================================ */

  --bg:
    var(--bg-page);

  --bg-soft:
    var(--bg-page-soft);

  --surface:
    var(--bg-surface);

  --surface-glass:
    var(--glass-white);

  --text:
    var(--text-primary);

  --text-soft:
    var(--text-secondary);

  --muted:
    var(--text-muted);

  --green:
    var(--green-600);

  --green-dark:
    var(--green-700);

  --green-soft:
    var(--green-200);

  --yellow:
    var(--yellow-200);

  --yellow-soft:
    var(--yellow-100);

  --yellow-dark:
    var(--yellow-600);

  --pink:
    var(--pink-200);

  --pink-soft:
    var(--pink-100);

  --pink-dark:
    var(--pink-600);

  --blue:
    var(--blue-200);

  --blue-soft:
    var(--blue-100);

  --blue-dark:
    var(--blue-700);

  --purple:
    var(--purple-200);

  --purple-dark:
    var(--purple-700);

  --dark:
    var(--bg-dark);

  --dark-soft:
    var(--bg-dark-soft);

  --border:
    var(--border-default);

  --border-strong:
    var(--border-medium);

  --shadow:
    var(--shadow-lg);

  --shadow-soft:
    var(--shadow-sm);

  --radius:
    var(--radius-3xl);

  --container:
    var(--container-main);

  --font:
    var(--font-primary);

  --ease:
    var(--ease-emphasized);
}


/* ============================================================
   44. COMPONENT CONTEXT — COMPANY
============================================================ */

.context-company {

  --context-bg:
    var(--green-200);

  --context-bg-soft:
    var(--green-50);

  --context-color:
    var(--green-700);

  --context-border:
    var(--border-green);

  --context-shadow:
    var(--shadow-green);
}


/* ============================================================
   45. COMPONENT CONTEXT — WORKER
============================================================ */

.context-worker {

  --context-bg:
    var(--pink-200);

  --context-bg-soft:
    var(--pink-50);

  --context-color:
    var(--pink-700);

  --context-border:
    var(--border-pink);

  --context-shadow:
    var(--shadow-pink);
}


/* ============================================================
   46. COMPONENT CONTEXT — STUDENT
============================================================ */

.context-student {

  --context-bg:
    var(--yellow-200);

  --context-bg-soft:
    var(--yellow-50);

  --context-color:
    var(--yellow-700);

  --context-border:
    var(--border-yellow);

  --context-shadow:
    var(--shadow-yellow);
}


/* ============================================================
   47. COMPONENT CONTEXT — ARRIVAL
============================================================ */

.context-arrival {

  --context-bg:
    var(--blue-200);

  --context-bg-soft:
    var(--blue-50);

  --context-color:
    var(--blue-700);

  --context-border:
    var(--border-blue);

  --context-shadow:
    var(--shadow-blue);
}


/* ============================================================
   48. COLOR CONTEXT UTILITIES
============================================================ */

.color-green {

  --local-color:
    var(--green-700);

  --local-bg:
    var(--green-200);

  --local-soft:
    var(--green-50);
}


.color-yellow {

  --local-color:
    var(--yellow-700);

  --local-bg:
    var(--yellow-200);

  --local-soft:
    var(--yellow-50);
}


.color-pink {

  --local-color:
    var(--pink-700);

  --local-bg:
    var(--pink-200);

  --local-soft:
    var(--pink-50);
}


.color-blue {

  --local-color:
    var(--blue-700);

  --local-bg:
    var(--blue-200);

  --local-soft:
    var(--blue-50);
}


.color-purple {

  --local-color:
    var(--purple-700);

  --local-bg:
    var(--purple-200);

  --local-soft:
    var(--purple-50);
}


/* ============================================================
   49. DARK THEME
============================================================ */

.theme-dark {

  --bg-page:
    #101916;

  --bg-page-alt:
    #131f1b;

  --bg-page-soft:
    #15211d;

  --bg-page-warm:
    #18231f;

  --bg-surface:
    #1d2c28;

  --bg-surface-soft:
    #22322e;

  --bg-surface-muted:
    #293a35;

  --text-primary:
    #f4f7f5;

  --text-secondary:
    #c9d2ce;

  --text-muted:
    #95a6a0;

  --text-soft:
    #71827c;

  --border-subtle:
    rgba(
      255,
      255,
      255,
      0.06
    );

  --border-default:
    rgba(
      255,
      255,
      255,
      0.1
    );

  --border-medium:
    rgba(
      255,
      255,
      255,
      0.16
    );

  --border-strong:
    rgba(
      255,
      255,
      255,
      0.24
    );

  --header-bg:
    rgba(
      16,
      25,
      22,
      0.84
    );

  --header-bg-scrolled:
    rgba(
      16,
      25,
      22,
      0.94
    );

  --card-bg:
    var(--bg-surface);

  --input-bg:
    var(--bg-surface);

  --input-bg-focus:
    var(--bg-surface-soft);

  --footer-bg:
    #0b1210;

  --search-overlay-bg:
    rgba(
      0,
      0,
      0,
      0.74
    );

  color-scheme:
    dark;
}


/* ============================================================
   50. HIGH CONTRAST THEME
============================================================ */

.theme-high-contrast {

  --text-primary:
    #111111;

  --text-secondary:
    #222222;

  --text-muted:
    #444444;

  --bg-page:
    #ffffff;

  --bg-surface:
    #ffffff;

  --border-default:
    rgba(
      0,
      0,
      0,
      0.24
    );

  --border-medium:
    rgba(
      0,
      0,
      0,
      0.4
    );

  --border-strong:
    rgba(
      0,
      0,
      0,
      0.62
    );

  --brand-primary:
    #27634e;

  --brand-primary-hover:
    #174a38;

  --shadow-sm:
    0
    5px
    18px
    rgba(
      0,
      0,
      0,
      0.12
    );

  --shadow-md:
    0
    12px
    35px
    rgba(
      0,
      0,
      0,
      0.16
    );
}


/* ============================================================
   51. REDUCED MOTION OVERRIDES
============================================================ */

.motion-disabled,
.motion-disabled * {

  --duration-fast: 0ms;

  --duration-normal: 0ms;

  --duration-medium: 0ms;

  --duration-slow: 0ms;

  --duration-slower: 0ms;

  --duration-hero: 0ms;
}


/* ============================================================
   52. PRINT TOKEN OVERRIDES
============================================================ */

@media print {

  :root {

    --bg-page:
      #ffffff;

    --bg-page-soft:
      #ffffff;

    --bg-surface:
      #ffffff;

    --text-primary:
      #000000;

    --text-secondary:
      #222222;

    --text-muted:
      #444444;

    --border-default:
      #cccccc;

    --shadow-xs:
      none;

    --shadow-sm:
      none;

    --shadow-md:
      none;

    --shadow-lg:
      none;

    --shadow-xl:
      none;

    --shadow-card:
      none;

    --shadow-card-hover:
      none;
  }
}


/* ============================================================
   END OF VARIABLES.CSS
============================================================ */