/* =============================================================
   Kyren Labs — متغیرهای پایه
   تنها جایی که رنگ، فاصله، گردی گوشه و فونت تعریف می‌شود.
   هیچ رنگی نباید مستقیم در فایل‌های دیگر نوشته شود.
   ============================================================= */

:root {
  /* ---- آبی برند (از لوگوی کایرن لبز) ---- */
  --brand-50:  #EEF3FF;
  --brand-100: #D9E4FF;
  --brand-200: #B0C6FF;
  --brand-300: #7C9EF5;
  --brand-400: #3F6BDF;
  --brand-500: #1D4ED8;
  --brand-600: #0A3399;
  --brand-700: #0A2472;
  --brand-800: #071A52;
  --brand-900: #050F33;
  --brand-rgb: 10, 51, 153;

  /* ---- طلایی (کایرن اونیکس) ---- */
  --gold-50:  #FBF5E9;
  --gold-100: #F5E7C9;
  --gold-200: #EBD4A4;
  --gold-300: #D9B676;
  --gold-500: #B08240;
  --gold-550: #976D34;   /* ۴.۶:۱ روی سفید — روشن‌ترین طلایی که برای متن مجاز است */
  --gold-600: #8F6730;   /* ۵.۱:۱ روی سفید — رنگ اصلی دکمه‌ها و متن تأکیدی */
  --gold-700: #6E4E23;   /* ۷.۶:۱ روی سفید */
  --gold-rgb: 143, 103, 48;

  /* ---- اونیکس و مرمر (از سنگ لوگوی کایرن اونیکس) ----
     مشکیِ اونیکس گرم است نه خنثی؛ ته‌مایه‌ی بنفشِ ملایمش همان چیزی
     است که در رگه‌های سنگ لوگو دیده می‌شود و کنار طلایی می‌نشیند. */
  --onyx-900: #16151A;
  --onyx-800: #201E26;
  --onyx-700: #2C2932;
  --onyx-600: #3A3640;   /* ۱۰.۴:۱ روی مرمر — متن فرعی */
  --onyx-500: #6B6572;   /* ۵.۱:۱ روی مرمر — کم‌رنگ‌ترین متنِ مجاز */
  --onyx-rgb: 22, 21, 26;

  --marble-50:  #FCFAF6;   /* زمینه‌ی صفحه */
  --marble-100: #F5F1E9;   /* زمینه‌ی بخش‌های متناوب */
  --marble-200: #E7E0D3;   /* مرز */

  /* ---- سبز (کایرن آکادمی) ---- */
  --green-25:  #F4FAF7;   /* زمینه‌ی بخش‌های متناوب صفحه‌ی آکادمی */
  --green-50:  #E8F5EF;
  --green-100: #C6E8D8;
  --green-200: #8FD3B5;
  --green-300: #4FB189;
  --green-400: #1E8F66;   /* ۴.۱:۱ روی سفید — فقط برای تیتر بزرگ */
  --green-500: #0B7150;   /* ۶.۳:۱ روی سفید */
  --green-600: #065A40;
  --green-700: #04432F;
  --green-rgb: 11, 113, 80;

  /* ---- خاکستری‌های تم روشن ---- */
  --ink-50:  #F7F9FC;
  --ink-100: #EDF1F7;
  --ink-200: #E1E6EE;
  --ink-400: #9AA5B8;
  --ink-450: #878F9E;   /* مرز کنترل‌ها — بالای ۳:۱ روی سفید */
  --ink-500: #626F7F;
  --ink-700: #3A4553;
  --ink-900: #0B1220;

  /* ---- خاکستری‌های تم تیره ---- */
  --dk-900: #060A14;
  --dk-800: #0E1524;
  --dk-700: #1A2337;
  --dk-600: #263149;
  --dk-500: #54617D;    /* مرز کنترل‌ها — ۳.۲:۱ روی زمینه تیره */

  /* ---- فاصله ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-7: 1.75rem; --sp-8: 2rem;
  --sp-10: 2.5rem; --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---- اندازه قلم ---- */
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-md: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem;

  /* ---- گردی گوشه ----
     --r-ctl همان عددی است که سیستم طراحی Claude برای کنترل‌ها
     (دکمه و ورودی) استفاده می‌کند: ۸ پیکسل. */
  --r-ctl: 8px;
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 20px;  --r-pill: 999px;
  --hairline: .5px;

  /* ---- حرکت ---- */
  --dur-fast: .14s;
  --dur: .24s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- عرض ستون ---- */
  --wrap: 1120px;
}

/* ================= تم روشن (پیش‌فرض) ================= */
:root,
html[data-theme="light"] {
  --c-bg:          #FFFFFF;
  --c-bg-tint:     var(--ink-50);
  --c-surface:     #FFFFFF;
  --c-text:        var(--ink-900);
  --c-text-soft:   var(--ink-700);
  --c-text-muted:  var(--ink-500);
  --c-border:      var(--ink-200);
  --c-control:     var(--ink-450);
  --c-border-soft: rgba(var(--brand-rgb), .12);
  --c-hairline:    rgba(var(--brand-rgb), .22);

  --c-accent:       var(--brand-600);
  --c-accent-hover: var(--brand-700);
  --c-accent-text:  var(--brand-600);
  --c-accent-soft:  var(--brand-50);
  --c-on-accent:    #FFFFFF;
  --c-glow:         rgba(var(--brand-rgb), .07);
  /* گرادیان کلمه‌ی تأکیدشده در تیترها — از سرمه‌ای تیره به آبی روشن */
  --accent-gradient: linear-gradient(100deg,
                       var(--brand-700) 0%,
                       var(--brand-600) 30%,
                       var(--brand-500) 62%,
                       var(--brand-400) 100%);

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .05);
  --shadow-md: 0 4px 20px rgba(11, 18, 32, .06);
  --shadow-lg: 0 12px 40px rgba(11, 18, 32, .09);

  /* لوگو در تم روشن دست‌نخورده می‌ماند */
  --logo-filter: none;
  --logo-filter-gold: none;
  --logo-filter-green: none;

  color-scheme: light;
}

/* ================= تم تیره ================= */
html[data-theme="dark"] {
  --c-bg:          var(--dk-900);
  --c-bg-tint:     var(--dk-800);
  --c-surface:     var(--dk-800);
  --c-text:        #EEF2F8;
  --c-text-soft:   #B9C3D4;
  --c-text-muted:  #8592A8;
  --c-border:      var(--dk-600);
  --c-control:     var(--dk-500);
  --c-border-soft: rgba(255, 255, 255, .07);
  --c-hairline:    rgba(124, 158, 245, .28);

  --c-accent:       var(--brand-400);
  --c-accent-hover: var(--brand-300);
  --c-accent-text:  var(--brand-300);
  --c-accent-soft:  rgba(63, 107, 223, .14);
  --c-on-accent:    #FFFFFF;
  --c-glow:         rgba(63, 107, 223, .10);
  /* در تم تیره باید روشن‌تر باشد وگرنه سرمه‌ای روی زمینه‌ی تیره گم می‌شود */
  --accent-gradient: linear-gradient(100deg,
                       var(--brand-400) 0%,
                       var(--brand-300) 45%,
                       var(--brand-200) 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);

  /* لوگوی سرمه‌ای در تم تیره دیده نمی‌شود.
     invert آن را روشن می‌کند و hue-rotate رنگ آبی را برمی‌گرداند،
     پس نوشته سفید می‌شود ولی حرف K آبی می‌ماند. */
  --logo-filter: invert(1) hue-rotate(180deg) brightness(1.08);
  /* طلایی از قبل روشن است؛ فقط کمی روشن‌تر */
  --logo-filter-gold: brightness(1.18) saturate(1.05);
  /* سبز تیره روی زمینه‌ی تیره خوانا نیست */
  --logo-filter-green: brightness(2.1) saturate(1.15);

  color-scheme: dark;
}


/* =============================================================
   تم طلایی — فقط صفحه‌ی Kyren Onyx
   -------------------------------------------------------------
   با data-page="onyx" روی تگ <html> فعال می‌شود.
   اینجا فقط توکن‌های «معنایی» بازتعریف می‌شوند، پس همه‌ی اجزای
   مشترک (دکمه، فرم، حلقه‌ی فوکوس، آیکون‌ها) خودبه‌خود طلایی
   می‌شوند و هیچ کد رنگی در فایل‌های دیگر لازم نیست.
   ============================================================= */
html[data-page="onyx"] {
  --c-border-soft: rgba(var(--gold-rgb), .16);
  --c-hairline:    rgba(var(--gold-rgb), .30);

  --c-accent:       var(--gold-600);
  --c-accent-hover: var(--gold-700);
  --c-accent-text:  var(--gold-600);
  --c-accent-soft:  var(--gold-50);
  --c-on-accent:    #FFFFFF;
  --c-glow:         rgba(var(--gold-rgb), .09);

  /* روشن‌ترین پله عمداً --gold-500 است (۳.۴:۱). این کلاس فقط داخل
     تیترهای بزرگ و وزن ۹۰۰ به کار می‌رود و برای «متن بزرگ»
     حد مجاز ۳:۱ است، نه ۴.۵:۱. */
  --accent-gradient: linear-gradient(100deg,
                       var(--gold-700) 0%,
                       var(--gold-600) 34%,
                       var(--gold-550) 64%,
                       var(--gold-500) 100%);

  /* سنگ لوگو: زمینه از سفیدِ خالی به مرمر گرم می‌رود و متن از
     سرمه‌ای به مشکیِ اونیکس. طلایی همچنان رنگ اصلی و تأکیدی است؛
     اونیکس فقط لحن زمینه و متن را می‌سازد. */
  --c-bg:         var(--marble-50);
  --c-bg-tint:    var(--marble-100);
  --c-surface:    #FFFFFF;
  --c-text:       var(--onyx-900);
  --c-text-soft:  var(--onyx-600);
  --c-text-muted: var(--onyx-500);
  --c-border:     var(--marble-200);

  /* بلوک‌های تیره‌ی تأکیدی (فوتر، نوارهای شاخص) */
  --c-onyx:    var(--onyx-900);
  --c-on-onyx: var(--marble-50);

  --shadow-sm: 0 1px 2px rgba(var(--onyx-rgb), .06);
  --shadow-md: 0 4px 20px rgba(var(--onyx-rgb), .07);
  --shadow-lg: 0 12px 40px rgba(var(--onyx-rgb), .10);

  /* لهجه‌ی رنگی اجزای مخصوص این صفحه */
  --tint-050: var(--gold-50);
  --tint-100: var(--gold-100);
  --tint-300: var(--gold-300);
  --tint-500: var(--gold-500);
  --tint-600: var(--gold-600);
  --tint-700: var(--gold-700);
  --tint-logo-filter: var(--logo-filter-gold);
}

html[data-page="onyx"][data-theme="dark"] {
  /* در تم تیره، خودِ سنگ زمینه می‌شود.
     ⚠️ رنگ متن باید همین‌جا هم نوشته شود: بلوک بالا (data-page) در
     فایل بعد از بلوک تم تیره می‌آید و با ویژگی برابر آن را خنثی
     می‌کند، پس اگر اینجا نباشد متن مشکی روی زمینه‌ی مشکی می‌ماند. */
  --c-bg:       var(--onyx-900);
  --c-bg-tint:  var(--onyx-800);
  --c-surface:  var(--onyx-800);
  --c-border:   var(--onyx-700);
  --c-onyx:     #000000;
  --c-on-onyx:  var(--marble-50);

  --c-text:       var(--marble-50);
  --c-text-soft:  #C8C2BA;
  --c-text-muted: #96908C;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);

  --c-border-soft: rgba(217, 182, 118, .12);
  --c-hairline:    rgba(217, 182, 118, .30);

  /* روی زمینه‌ی تیره، طلاییِ تیره اصلاً دیده نمی‌شود؛ پس جای
     روشن و تیره عوض می‌شود: زمینه‌ی دکمه طلایی روشن، متنش تیره. */
  --c-accent:       var(--gold-300);
  --c-accent-hover: var(--gold-200);
  --c-accent-text:  var(--gold-300);
  --c-accent-soft:  rgba(217, 182, 118, .14);
  --c-on-accent:    var(--dk-900);
  --c-glow:         rgba(217, 182, 118, .10);

  --accent-gradient: linear-gradient(100deg,
                       var(--gold-500) 0%,
                       var(--gold-300) 45%,
                       var(--gold-100) 100%);

  --tint-050: rgba(217, 182, 118, .10);
  --tint-100: rgba(217, 182, 118, .16);
  --tint-300: var(--gold-300);
  --tint-500: var(--gold-300);
  --tint-600: var(--gold-300);
  --tint-700: var(--gold-200);
}


/* =============================================================
   تم سبز — فقط صفحه‌ی Kyren Academy
   -------------------------------------------------------------
   با data-page="academy" روی تگ <html> فعال می‌شود؛ درست مثل بلوک
   طلایی بالا، فقط توکن‌های معنایی عوض می‌شوند و همه‌ی اجزای مشترک
   خودبه‌خود سبز می‌شوند.
   ============================================================= */
html[data-page="academy"] {
  --c-border-soft: rgba(var(--green-rgb), .14);
  --c-hairline:    rgba(var(--green-rgb), .28);

  --c-accent:       var(--green-500);
  --c-accent-hover: var(--green-600);
  --c-accent-text:  var(--green-500);
  --c-accent-soft:  var(--green-50);
  --c-on-accent:    #FFFFFF;
  --c-glow:         rgba(var(--green-rgb), .08);

  /* روشن‌ترین پله --green-400 است (۴.۱:۱)؛ فقط در تیترهای بزرگ */
  --accent-gradient: linear-gradient(100deg,
                       var(--green-700) 0%,
                       var(--green-600) 34%,
                       var(--green-500) 64%,
                       var(--green-400) 100%);

  --c-bg-tint: var(--green-25);

  --tint-050: var(--green-50);
  --tint-100: var(--green-100);
  --tint-300: var(--green-300);
  --tint-500: var(--green-500);
  --tint-600: var(--green-600);
  --tint-700: var(--green-700);
  --tint-logo-filter: var(--logo-filter-green);
}

html[data-page="academy"][data-theme="dark"] {
  /* ⚠️ مثل بلوک طلایی: زمینه و متن تم تیره باید همین‌جا دوباره
     نوشته شوند، وگرنه بلوک بالا آن‌ها را خنثی می‌کند. */
  --c-bg-tint: var(--dk-800);

  --c-border-soft: rgba(79, 177, 137, .12);
  --c-hairline:    rgba(79, 177, 137, .30);

  --c-accent:       var(--green-300);
  --c-accent-hover: var(--green-200);
  --c-accent-text:  var(--green-300);
  --c-accent-soft:  rgba(79, 177, 137, .14);
  --c-on-accent:    var(--dk-900);
  --c-glow:         rgba(79, 177, 137, .10);

  --accent-gradient: linear-gradient(100deg,
                       var(--green-400) 0%,
                       var(--green-300) 45%,
                       var(--green-100) 100%);

  --tint-050: rgba(79, 177, 137, .10);
  --tint-100: rgba(79, 177, 137, .16);
  --tint-300: var(--green-300);
  --tint-500: var(--green-300);
  --tint-600: var(--green-300);
  --tint-700: var(--green-200);
}